<template>
  <div class="">
    <h1>个人中心</h1>
    <h2>欢迎 {{ user }}</h2>

    <button @click="exit">退出登陆</button>

    <!-- 如果已经登陆的就可以正常访问这个页面 如果没有登陆会直接跳转到登陆页面 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: "",
    };
  },
  mounted() {
    this.user = localStorage.getItem("user");
  },
  methods: {
    exit() {
      localStorage.removeItem("user");
      this.$router.push("/login");
    },
  },
  components: {},

  beforeRouteEnter(to, from, next) {
    console.log(to, from);
    // next();
    if (localStorage.getItem("user")) {
      next();
    } else {
      next("/login");
    }
  },
  //组件级守卫 页面跳转之前 如果登陆了就继续下一步 没有登陆就跳转到登陆
  beforeRouteLeave(to, from, next) {
    console.log(to, from);
    next();
  },
  //从这个页面离开

  beforeRouteUpdate() {},
  //路由更新之前 还是这个页面 但是参数变化的时候会触发路由更新
};
</script>

<style lang="scss"></style>
